import QtQuick
import QtQuick.Controls

Item {
    id: heartBeatLine
    width: 100
    height: 30

    property bool hblRun: false
    property color hblColor: "#e1e4e8"
    property var hlXY: ["10", "10",
        "20", "10",
        "30", "0",
        "40", "20",
        "50", "10",
        "60", "10",
    ]
    property int hlIndex: 0

    function clearCanvas() {
        var ctx = canvas.getContext('2d')
        ctx.clearRect(0,0,canvas.width,canvas.height)
        canvas.requestPaint()
    }

    function paintHeartLine() {
        var ctx = canvas.getContext("2d")

        ctx.lineWidth = 1
        ctx.strokeStyle = hblColor

        ctx.beginPath()
        ctx.moveTo(hlIndex === 0 ? hlXY[0] : hlXY[0+(hlIndex-1)*2], hlIndex === 0 ? hlXY[0] : hlXY[1+(hlIndex-1)*2])
        ctx.lineTo(hlXY[0+hlIndex*2], hlXY[1+hlIndex*2])

        ctx.stroke()
        canvas.requestPaint()
    }

    function paintLine() {
        var ctx = canvas.getContext("2d")

        ctx.lineWidth = 1
        ctx.strokeStyle = hblColor

        ctx.beginPath()
        ctx.moveTo(10, 10)
        ctx.lineTo(60, 10)

        ctx.stroke()
        canvas.requestPaint()
    }

    Canvas {
        id: canvas
        anchors.fill: parent

        onAvailableChanged:  {
            if(available) {
                clearCanvas()
                paintLine()
            }
        }
    }

    Timer {
        id: timer
        interval: 150
        running: hblRun
        triggeredOnStart: true
        repeat: true

        onRunningChanged: {
            if(!running) {
                clearCanvas()
                paintLine()
            }
            else {
                hlIndex = 0
                clearCanvas()
            }
        }

        onTriggered: {
            paintHeartLine()
            hlIndex++;
            if(hlIndex >= 7) {
                hlIndex = 0
                clearCanvas()
            }
        }
    }
}
